<template>
		<view class="status_bar"  :style="{paddingTop:safeAreaInsets+'rpx',opacity:myopacity }">
		   <!-- 这里是状态栏  {opacity:myopacity==1 ? transform: translateY(100+"rpx") : transform: translateX(0+"rpx")} -->
		   <view class="status_avatar" :style="myopacity >= 1 ? 'transform:translateY(18rpx)':'transform: translateY(100rpx)'">
		   	<image style="width:80%; height: 80%;border-radius: 50%;
		   	box-sizing: border-box;" mode="aspectFill" :src="$globalUrl+avatarUrl"
		   	error="imageError"></image>
		   </view>
		</view>	
</template>

<script>
	import { mapState } from 'vuex'//引入mapState
	export default {
		props: ['myopacity'],
		name:"CustomNavbar",
		data() {
			return {
				safeAreaInsets: 0,
			}
		},
		created() {
			//获取 屏幕边界到安全区域距离
			const top = uni.getSystemInfoSync().safeAreaInsets.top;
			this.safeAreaInsets = top;
		},
		 watch:{
		     //监听 username的值的变化
		    //在形参列表中，第一个值是“变化后的新值”，第二个值是“变化前的旧值”
		     myopacity(newVal,oldVal){
		        if(newVal >= 1){
					this.myopacity = 1
				}
		    }
		},
		computed: mapState({
				// 从state中拿到数据 箭头函数可使代码更简练
				avatarUrl: state => state.avatarUrl,
		})
	}
</script>

<style lang="scss">
    .status_bar {
		position: absolute;	
		top: 0;
		left: 0;
        width: 100%;
		background:   #eee;
		z-index: 9999;
		height: 120rpx;
		color: white;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		align-items: center;
		overflow: hidden;
		.status_avatar{
			width: 70rpx;
			height: 70rpx;
			transition: all 1s;
		}
    }
</style>